<template>

  <div>
    <h4>欢迎光临_vue开发的收银系统_水果店</h4>
    <div id="one">
      <div id="son1">
          苹果10￥/斤，折扣<8折>
        </div>
      <div id="son2">
        请输入你要购买的斤数：<input type="number" v-model="num">
      </div>
    </div>
    
    <div id="two">
      <div>
        <button @click="add">结账买单</button>
      </div>
      <div>结账单：总价：{{price}}￥元  折扣价：{{price*0.8}}￥元   省了：{{price*0.2}}￥元</div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      num :0,
      price:0
    }
  },
  methods: {
    add(){ 
      this.price = this.num * 10
    }
  }
}
</script>

<style>
h4{
  text-align: center;
}
  #one{
    width: 800px;
    height: 50px;
    border: 1px solid #333;
    margin: 0 auto;
    margin-bottom: 2px;
  }
  #one #son1{
   height: 20px;
    padding: 2px;
    border: 1px solid #ccc;
     line-height: 20px;
    text-align: center;
  }
  #one #son2{
   height: 20px;
    padding: 2px;
    border: 1px solid #ccc;
     line-height: 20px;
    text-align: center;
  }
  #two{
    width: 800px;
    height: 50px;
    border: 1px solid #333;
     margin: 0 auto;
  }
  #two div{
    height: 20px;
    padding: 2px;
    border: 1px solid #ccc;
     line-height: 20px;
    text-align: center;
  }
</style>